<?php
/* @var $userName string */
/* @var $key string */

/* @var $accessToken string */

use yii\helpers\Html;
use yii\helpers\Url;
use yii\bootstrap\ActiveForm;
use backend\assets\AppAsset;

$this->registerJsFile(Yii::$app->request->baseUrl . '/js/jquery-3.3.1.js', ['depends' => ['yii\web\JqueryAsset'], 'position' => $this::POS_HEAD]);

AppAsset::register($this);
?>

<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title><?php echo Yii::$app->name ?></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 网站描述和关键词  针对SEO -->
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="stylesheet" type="text/css" href="<?php echo Yii::$app->request->baseUrl; ?>/css/styles.css"/>

    <?php $this->head() ?>
</head>
<style type="text/css">
    .bg {
        height: 970px;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        background-color: #C9EFFA;
    }

    .center {
        background-image: url(<?php echo Yii::$app->request->baseUrl;?>/images/bg-04.png);
        background-repeat: no-repeat;
        background-position: center top;
        height: 700px;
        width: 1346px;
        margin-right: auto;
        margin-left: auto;
        background-color: #FFF;
        padding-top: 270px;
    }

    .f_orm_top {
        height: 32px;
        width: 420px;
        margin-right: auto;
        margin-left: auto;
        background-image: url(<?php echo Yii::$app->request->baseUrl;?>/images/yuanhu_05.png);
        filter: alpha(opacity:90);
        opacity: 0.95;
    }

    .f_orm {
        min-height: 160px;
        width: 420px;
        background-color: #FFF;
        margin-right: auto;
        margin-left: auto;
        filter: alpha(opacity:90);
        opacity: 0.95;
    }

    .f_orm_foot {
        height: 26px;
        width: 420px;
        margin-right: auto;
        margin-left: auto;
        background-image: url(<?php echo Yii::$app->request->baseUrl;?>/images/yuanhu_07.png);
        filter: alpha(opacity:90);
        opacity: 0.95;
    }

    .help-block {
        display: block;
        margin-top: 5px;
        margin-bottom: 0px;
        color: red;
    }
</style>

<body style="overflow:hidden;">
<?php $this->beginBody() ?>
<div class="bg">
    <div class="center">
        <div class="f_orm_top">
        </div>
        <div class="f_orm form">
            <div id="error" style="display:none">
                <p style="font-size:20px">系统检测您当前使用的浏览器可能会影响平台使用，推荐您使用以下浏览器:</p>
                <p style="font-size:18px;margin-left: 30px;">Chrome, Firefox, Safari, Edge，360极速</p>
            </div>
            <div id="login-form">
                <div style="text-align: center;font-size: 30px;line-height: 60px;margin-bottom: 30px;">
                    请绑定应用账号<br><?= $userName ?>
                </div>


                <form id="form_html5" class="form-horizontal form-box" action="#">

                    <div class="form-group">
                        <?= Html::label('用户名', '', ['class' => 'col-sm-3 control-label']) ?>
                        <div class="col-sm-7">
                            <input id="username" name="username" type="text" value="" placeholder="用户名"
                                   class="form-control" maxlength="100">
                            <div class="help-block error_username"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <?= Html::label('密码', '', ['class' => 'col-sm-3 control-label']) ?>
                        <div class="col-sm-7">
                            <input id="password" name="password" type="password" value="" placeholder="密码"
                                   class="form-control" maxlength="100">
                            <div class="help-block error_password"></div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="" style="text-align: center">
                            <span type="submit" onclick="submit(this,'<?= $key ?>')" class="btn btn-primary btn-sm"
                                  style=" margin-left: 15px">绑定</span>
                        </div>

                </form>
            </div>


        </div>
    </div>
    <div class="f_orm_foot">&nbsp;</div>
</div>
</div>
<?php $this->endBody() ?>
</body>
<script type="text/javascript">
    if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE8.0") {
        alert("很抱歉:" + "\n" + "    您当前使用的浏览器版本过低,可能可能会影响平台使用,推荐您选用火狐,谷歌,360极速等浏览器");
        document.getElementById('login-form').style.display = "none";
        document.getElementById('error').style.display = "block";
    }

</script>
</html>
<?php $this->endPage() ?>
<script>
    // 保存指标
    var can_submit = 1;

    function submit(t, key) {
        let form_id_name = '#form_html5';
        let form = $(form_id_name);

        if (can_submit) {
            can_submit = 0
        } else {
            return false;
        }

        //表单提交
        $.ajax({
            url: "<?php echo Url::toRoute(['ajax-bound']);?>",
            type: 'post',
            data: form.serialize() + '&key=' + key,
            success: function (res) {
                let obj = JSON.parse(res);
                let msg = obj["msg"];
                let code = obj["code"];
                let title = '成功';
                let class_name = 'color success';
                $(form_id_name + " .help-block").each(function (ii, vv) {
                    $(vv).html('');
                });
                if (code == 200) {
                    window.location.href = "<?= Url::to(['site/oauth-login', 'accessToken' => $accessToken, 'state' => 1]) ?>";
                } else {
                    class_name = 'color warning';
                    title = '失败';
                    let error_arr = obj["data"]["error_arr"];
                    let i = 0;
                    $.each(error_arr, function (index, value) {
                        $(form_id_name + ' .' + index).html(value);
                        //console.log(value);
                        i++;
                    });
                    if (i == 0) {
                        alert(msg);
                    }
                }

                can_submit = 1;
            },
            error: function () {
                //提示
                alert('请求服务器失败');
                can_submit = 1;
                return false;
            }
        });

        return false;
    }
</script>
